<template>
	<view class="center">
		<view class="top">
			<image src="../../static/images/history.png" mode=""></image>
			<view class="text">浏览历史</view>
		</view>
		<!-- <view>
			<u-button class="deleteButton" type="primary" icon="trash-fill" size="mini" color="#74787a"
				@click.native="clearHistory()"></u-button>
		</view> -->
		<!-- 历史记录浏览区 -->
		<view class="content">
			<view class="row" v-for="item in historyList">
				<scienceHistory :item="item" @click.native="gotoDetails(item)"></scienceHistory>
			</view>
		</view>
		<!-- 历史记录为空时 -->
		<view class="nohistory" v-if="!historyList.length">
			<image src="../../static/images/nohis.png" mode="widthFix"></image>
			<view class="text">暂无浏览记录</view>
		</view>
		<!-- 消息提示组件 -->
		<u-notify ref="uNotify"></u-notify>
	</view>
</template>

<script>
	import {
		parseTime
	} from "@/utils/tool.js";
	// 导入history.js
	import {
		saveHistroy,
		queryHistory
	} from "@/api/history.js"
	export default {
		data() {
			return {
				historyList: [],
				notifyMessage: "历史记录同步成功!"
			};
		},
		onLoad() {
			this.historyList = uni.getStorageSync("scienceHistory");
			if (this.historyList.length === 0) {
				this.BlanceHistory();
			}
		},
		// 下拉刷新事件
		onPullDownRefresh() {
			// 同步历史记录
			this.BlanceHistory()
			uni.stopPullDownRefresh()
			this.showTips()
		},
		methods: {
			// 消息提示方法
			showTips() {
				this.$refs.uNotify.show({
					top: 0,
					type: 'error',
					color: '#ffffff',
					bgColor: '#69a794',
					message: this.notifyMessage,
					duration: 1000 * 2,
					fontSize: 16,
					safeAreaInsetTop: false
				})
			},
			// 同步历史记录
			BlanceHistory() {
				const personInfo = uni.getStorageSync("personInfo")
				this.$request(`/history/science/query/${personInfo.id}`, "GET", {}, {
					token: uni.getStorageSync("token"),
					"content-type": "application/json"
				}).then(res => {
					this.historyList = res.data.data;
					//存缓存
					uni.setStorageSync("scienceHistory", this.historyList);
					console.log(this.historyList)
				})
			},
			gotoDetails(item) {
				uni.navigateTo({
					url: `/pages/details/details?id=${item.id}`
				});
				//添加历史记录
				this.addHistory(item);
			},
			syncSave() {
				let HistoryArray = uni.getStorageSync("scienceHistory") || [];
			},
			//添加历史记录
			addHistory(item) {
				//从缓存从取historyList
				this.historyList = uni.getStorageSync("scienceHistory") || [];
				//调用同步保存缓存方法

				//对historyList进行过滤
				if (this.historyList.length != 0) {
					this.historyList = this.historyList.filter(t => {
						return t.id !== item.id
					})
				}
				//存放history
				//设置时间
				item.lookTime = parseTime(Date.now());
				this.historyList.unshift(item);
				//再对原数组进行截取
				this.historyList = this.historyList.slice(0, 20);
				//保存用户历史记录
				saveHistroy(this.historyList).then(res => {
					console.log(res)
				}).catch(res => {
					console.log(res)
				})
				//调用blanceHistroy方法
				this.BlanceHistory()
			}
		}
	}
</script>

<style lang="scss">
	.center {
		.deleteButton {
			width: 10%;
			height: 6%;
			margin-right: 1%;
			margin-top: 1%;
		}
	}

	.top {
		padding: 50rpx 0;
		background: #F8F8F8;
		color: #666;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;

		image {
			width: 150rpx;
			height: 150rpx;
		}

		.text {
			font-size: 38rpx;
			padding-top: 20rpx;
		}
	}

	.content {
		padding: 30rpx;

		.row {
			border-bottom: 1px dotted #efefef;
			padding: 20rpx 0;
		}


	}

	.nohistory {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;

		image {
			width: 450rpx;
		}

		.text {
			font-size: 26rpx;
			color: #888;
		}
	}
</style>